<template>
    <div id="box">
        <h3 class="title">{{ shuju.title }}</h3>
        <p class="info">
            <span>发表时间：{{ shuju.add_time | formatDate}}</span>
            <span>点击了：{{ shuju.click }}次</span>
        </p>
        <hr>
        <!-- 新闻内容 -->
        <div id="content" v-html="shuju.content">
        </div>
        <!-- 评论 -->
        <comment :newsid="id"></comment>
    </div>
</template>

<script>
import comment from '../sub-component/comment.vue'
export default {
    data(){
        return {
            shuju:''
        }
    },
    created(){
        this.getNewsDetails()
    },
    methods:{
        async getNewsDetails(){
            // console.log(this);
            // this.id = this.$route.params.id
            let res = await this.$http.get('/api/getnew?id='+this.id);
            // this.shuju = res
            // console.log(res.data);
            if (res.data.status==0) {
                this.shuju = res.data.message[0]
            }

        }
    }, 
    props:['id'],
    components:{
        comment
    }
}
</script>

<style lang="less" scoped>
    #box {
        padding:0 10px 50px 10px;
        .title {
            padding: 5px 0;
            text-align: center;
        }

        #content {
            text-indent: 2em;
        }

        .info {
            display: flex;
            justify-content: space-between;
            color: blue;
        }
    }
</style>